<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background: deeppink;
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="box">你好</div>
  <button>点击</button>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>
    // jq的页面中的动画帧数设置 数值越大 动画效果更好
    jQuery.fx.interval = 1000;
    // 关闭页面所有的jq的动画
    jQuery.fx.off = true;

    // jq的自定义动画 animate()
    // 元素.animate({属性:属性值},时间，曲线，callback)

    // delay(毫秒数) 延迟方法
    $("#box").animate({ width: "500px", height: "500px", "font-size": "50px", left: "500px", top: "300px" }, 5000, function () {
      // alert("动画执行完毕")
    }).delay(3000).fadeOut(3000)

    // stop()停止动画
    $("button").click(function () {
      // stop(true)  立即停止动画
      $("#box").stop(true)
      // stop(true,true)瞬间完成动画 
      // $("#box").stop(true, true)
    })
  </script>
</body>

</html>